<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <link rel="stylesheet" href="./boot/css/bootstrap.css">
    <link rel="stylesheet" href="./boot/css/bootstrap-icons.css">
    <script src="./boot/js/bootstrap.bundle.js"></script> -->
    <title>网易云音乐首页</title>
    <link rel="stylesheet" href="./css/indexOf.css">
</head>

<body>
    <!-- 首页所有内容 -->
    <div class="shouye">
        <!-- 顶部导航栏 -->
        <div class="nav">
            <!-- 版心 -->
            <div class="center-top">
                <div class="top-nav">
                    <h3><a href="" class="text">网易云音乐</a></h3>
                    <ul class="left">                  
                        <li><a href="">发现音乐</a></li>
                        <li><a href="#">我的音乐</a></li>
                        <li><a href="#">关注</a></li>
                        <li><a href="#">商城</a></li>
                        <li><a href="#">音乐人</a></li>
                        <li><a href="#">下载客户端</a></li>
                    </ul>
                    <!-- 右侧搜索框 -->
                    <div class="search">
                        <input type="text" placeholder="输入要搜索的音乐名或歌手名">
                        <button class="author">创作者中心</button>
                        <a class="load">登录</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 中间红色条 -->
        <div class="nav2">
            <div class="center">
                <ul>
                    <li><a href="#">推荐</a></li>
                    <li><a href="#">排行榜</a></li>
                    <li><a href="#">歌单</a></li>
                    <li><a href="#">主播电台</a></li>
                    <li><a href="#">歌手</a></li>
                    <li><a href="#">新碟上架</a></li>
                </ul>
            </div>
        </div>
        <!-- 轮播图 -->
        <div class="xz-carousel">
            <div class="box">
                <!-- 移动的容器 -->
                <ul class="list">
                    <!-- 轮播图片 -->
                    <li class="on">
                        <img src="./img/index/轮播图1.jpg" alt="" />
                    </li>
                    <li>
                        <img src="./img/index/轮播图2.jpg" alt="" />
                    </li>
                    <li>
                        <img src="./img/index/轮播图3.jpg" alt="" />
                    </li>
                    <li>
                        <img src="./img/index/轮播图4.jpg" alt="" />
                    </li>
                </ul>
                <!-- 左右按钮 -->
                <a class="btn prev">&lt;</a>
                <a class="btn next">&gt;</a>
                <!-- 分页器 -->
                <ol class="page">
                    <li class="on"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ol>
            </div>
            <script>
                //1.找到对应的DOM节点
                var box = document.querySelector(".box"); //找到容器盒子
                var list = document.querySelector(".list");
                var listli = document.querySelectorAll(".list li");
                var len = document.querySelectorAll(".page li").length;
                var ltBtn = document.querySelector(".prev");
                var rtBtn = document.querySelector(".next");
                var page = document.querySelector(".page");
                var pageli = document.querySelectorAll(".page li");
                //2.当前所处的下标
                var curIndex = 0;
                //3.左按钮点击事件
                ltBtn.onclick = function () {
                    curIndex--;
                    if (curIndex <= -1) {
                        curIndex = len - 1;
                    }
                    console.log(listli.length);
                    //当前下标相同的显示,也就是添加上on,其他的去掉on
                    for (var i = 0; i < listli.length; i++) {
                        listli[i].classList.remove("on");
                    }
                    listli[curIndex].classList.add("on");
                    // 处理下标对应
                    for (var j = 0; j < pageli.length; j++) {
                        pageli[j].classList.remove("on");
                    }
                    pageli[curIndex].classList.add("on");
                };
                // 4.有按钮点击事件
                rtBtn.onclick = function () {
                    curIndex++;
                    if (curIndex >= len) {
                        curIndex = 0;
                    }
                    // 当前下标相同的显示,也就添加on,其他的去掉on
                    for (var i = 0; i < listli.length; i++) {
                        listli[i].classList.remove("on");
                    }
                    listli[curIndex].classList.add("on");
                    // 处理下标对应
                    for (var j = 0; j < pageli.length; j++) {
                        pageli[j].classList.remove("on");
                    }
                    pageli[curIndex].classList.add("on");
                };

                //5.分页下标点击事件
                for (var i = 0; i < pageli.length; i++) {
                    //ol下的li全部添加了data-index属性,意思就是给每个li加上了属于自己的序号
                    pageli[i].setAttribute("data-index", i);
                    pageli[i].onclick = function () {
                        console.log(this.getAttribute("data-index"));
                        curIndex = this.getAttribute("data-index");
                        for (var i = 0; i < listli.length; i++) {
                            listli[i].classList.remove("on");
                        }
                        listli[curIndex].classList.add("on");
                        // 处理下标对应
                        for (var j = 0; j < pageli.length; j++) {
                            pageli[j].classList.remove("on");
                        }
                        pageli[curIndex].classList.add("on");
                    };
                }
                //6.自动播放
                var timer = setInterval(function () {
                    rtBtn.onclick();
                }, 3000);
                //7.鼠标移入定时器停,移除,定时器开启
                box.onmouseenter = function () {
                    clearInterval(timer);
                };
                box.onmouseleave = function () {
                    timer = setInterval(function () {
                        rtBtn.onclick();
                    }, 3000);
                };
          
            </script>
        </div>

        <!-- 主体内容 -->
        <div class="main">
            <!-- 版心 -->
            <div class="center">
                <!-- 包裹主体内容的盒子 主体内容分为左右两块-->
                <div class="main-box">
                    <!-- 主体内容的左边，从上到下分为三大块 -->
                    <div class="left">
                        <!-- 一楼为热门推荐 -->
                        <div class="f1">
                            <!-- 一楼上部分区域 -->
                            <div class="head">
                                <a href="#">热门推荐</a>
                                <div>
                                    <a href="">华语</a>
                                    <span>|</span>
                                    <a href="">流行</a>
                                    <span>|</span>
                                    <a href="">摇滚</a>
                                    <span>|</span>
                                    <a href="">民谣</a>
                                    <span>|</span>
                                    <a href="">电子</a>
                                </div>
                                <span>更多</span>
                            </div>
                            <!-- 一楼下部分区域 -->
                            <ul>
                                <li>
                                    <img src="./img/index/listen.jpg" alt="">
                                    <a href="#">"释怀吧，不要在纠结于没有结果的事儿"</a>
                                </li>
                                <li>
                                    <img src="./img/index/listen2.jpg" alt="">
                                    <a href="#">"喜欢 合适 在一起 三件事"</a>
                                </li>
                                <li>
                                    <img src="./img/index/listen3.jpg" alt="">
                                    <a href="#">"氛围感、高级感视频剪辑"</a>
                                </li>
                                <li>
                                    <img src="./img/index/listen4.jpg" alt="">
                                    <a href="#">"阿尔法脑波音乐（激发右脑潜能）"</a>
                                </li>
                                <li>
                                    <img src="./img/index/listen.jpg" alt="">
                                    <a href="#">"遇见15岁的大张伟"</a>
                                </li>
                                <li>
                                    <img src="./img/index/listen2.jpg" alt="">
                                    <a href="#">"永远活在自卑和负罪感中"</a>
                                </li>
                                <li>
                                    <img src="./img/index/listen3.jpg" alt="">
                                    <a href="#">"后来的我们--五月天"</a>
                                </li>
                                <li>
                                    <img src="./img/index/listen4.jpg" alt="">
                                    <a href="#">"其实无论怎么选择，都会有遗憾对吧"</a>
                                </li>
                            </ul>
                        </div>
                        <!-- 二楼为新碟上架 -->
                        <div class="f2">
                            <!-- 二楼上部分区域 -->
                            <div class="head">
                                <a href="#" class="txt">热碟上架</a>
                                <a href="#">更多</a>
                            </div>
                            <!-- 二楼下部分区域  滚动条-->
                            <div class="roll">
                                <ul>
                                    <li><img src="./img/index/滚动1.jpg" alt="">
                                        <h5>GOT7</h5>
                                        <p>>GOT7</p>
                                    </li>
                                    <li><img src="./img/index/滚动2.jpg" alt="">
                                        <h5>上善如酒</h5>
                                        <p>杨千嬅</p>
                                    </li>
                                    <li><img src="./img/index/滚动3.jpg" alt="">
                                        <h5>KINGDOM</h5>
                                        <p>ICE/SASIOVE</p>
                                    </li>
                                    <li><img src="./img/index/滚动4.jpg" alt="">
                                        <h5>R</h5>
                                        <p>NINEONE#</p>
                                    </li>
                                    <li><img src="./img/index/滚动5.jpg" alt="">
                                        <h5>Harry's HOUSE</h5>
                                        <p>Harry Style</p>
                                    </li>
                                    <li><img src="./img/index/滚动1.jpg" alt="">
                                        <h5>倾~听</h5>
                                        <p>谭永玲</p>
                                    </li>
                                    <li><img src="./img/index/滚动2.jpg" alt="">
                                        <h5>Tour Edition</h5>
                                        <p>Ed Sheeran</p>
                                    </li>
                                    <li><img src="./img/index/滚动3.jpg" alt="">
                                        <h5>你最好知道</h5>
                                        <p>Tizzy</p>
                                    </li>
                                    <li><img src="./img/index/滚动4.jpg" alt="">
                                        <h5>但求疼</h5>
                                        <p>谭维维</p>
                                    </li>
                                    <li><img src="./img/index/滚动5.jpg" alt="">
                                        <h5>夜空中最亮的星</h5>
                                        <p>张杰</p>
                                    </li>

                                </ul>
                            </div>
                        </div>
                        <!-- 三楼为榜单 -->
                        <div class="f3">
                            <!-- 三楼上部分区域 -->
                            <div class="head">
                                <a href="#" class="txt">榜单</a>
                                <a href="#">更多</a>
                            </div>
                            <!-- 三楼下部分榜单主体内容区域 -->
                            <div class="foot-main">
                                <!-- 榜单左中右三部分内容 -->
                                <!-- 榜单左边内容 -->
                                <div>
                                    <!-- 左边上部分内容 -->
                                    <div class=top>
                                        <div class="top-img">
                                            <img src="./img/index/榜单1.jpg" alt="">
                                        </div>
                                        <div class="top-title">飙升榜</div>
                                    </div>
                                    <!-- 左边下部分内容 -->
                                    <ol>
                                        <li><span>1</span> 天空有雨，伞下有你</li>
                                        <li><span>2</span> 爱你</li>
                                        <li><span>3</span> 大眠</li>
                                        <li><span>4</span> 想你</li>
                                        <li><span>5</span> 故犯</li>
                                        <li><span>6</span> 再见莫妮卡</li>
                                        <li><span>7</span> 天空有雨，伞下有你</li>
                                        <li><span>8</span> 失落沙洲</li>
                                        <li><span>9</span>多余的解释</li>
                                        <li><span>10</span> 天下</li>
                                        <li><a href="#">查看全部</a></li>
                                    </ol>
                                </div>
                                <!-- 榜单中间内容 -->
                                <div>
                                    <!-- 中上部分内容 -->
                                    <div class=top>
                                        <div class="top-img">
                                            <img src="./img/index/榜单2.jpg" alt="">
                                        </div>
                                        <div class="top-title">新歌榜</div>
                                    </div>
                                    <!-- 中间边下部分内容 -->
                                    <ol>
                                        <li><span>1</span> 孤芳自赏</li>
                                        <li><span>2</span> 老婆</li>
                                        <li><span>3</span> 寂寞沙洲冷</li>
                                        <li><span>4</span> 克斯的与</li>
                                        <li><span>5</span> 渴死的鱼</li>
                                        <li><span>6</span> 五月天</li>
                                        <li><span>7</span> 爆炸</li>
                                        <li><span>8</span> 有可能的夜晚</li>
                                        <li><span>9</span> 离开地球表面</li>
                                        <li><span>10</span> 大雨</li>
                                        <li><a href="#">查看全部</a></li>
                                    </ol>
                                </div>
                                <!-- 榜单右边内容 -->
                                <div>
                                    <!-- 右边上部分内容 -->
                                    <div class=top>
                                        <div class="top-img">
                                            <img src="./img/index/榜单3.jpg" alt="">
                                        </div>
                                        <div class="top-title">原创榜</div>
                                    </div>
                                    <!-- 右边下部分内容 -->
                                    <ol>
                                        <li><span>1</span> 想你</li>
                                        <li><span>2</span> 异国恋</li>
                                        <li><span>3</span> 关于郑州的记忆</li>
                                        <li><span>4</span> 朋友圈</li>
                                        <li><span>5</span> 董小姐</li>
                                        <li><span>6</span> 独到</li>
                                        <li><span>7</span> 要把戏</li>
                                        <li><span>8</span> 篇章</li>
                                        <li><span>9</span> 阿刁</li>
                                        <li><span>10</span> 成都</li>
                                        <li><a href="#">查看全部</a></li>
                                    </ol>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 主体内容的右边 -->
                    <div class="right">
                        <div class="login">
                            <p>登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p>
                            <a href="#">用户登录</a>
                        </div>
                        <div class="singer">
                            <h4>
                                <span>入驻歌手</span>
                                <a href="#">查看更多</a>
                            </h4>
                            <ul>
                                <li onclick="jump()">
                                    <a href="#"><img src="./img/index/入驻歌手1.jpg" alt=""></a>
                                    <div>
                                        <h5>张惠妹aMEI</h5>
                                        <p>台湾歌手张惠妹</p>
                                    </div>
                                </li>
                                <li onclick="jump()">
                                    <a href="#"><img src="./img/index/入驻歌手2.jpg" alt=""></a>
                                    <div>
                                        <h5>吴莫愁Momo</h5>
                                        <p>中国好声音选手</p>
                                    </div>
                                </li>
                                <li onclick="jump()">
                                    <a href="#"><img src="./img/index/入驻歌手3.jpg" alt=""></a>
                                    <div>
                                        <h5>孙楠</h5>
                                        <p>代表作《拯救》</p>
                                    </div>
                                </li>
                                <li onclick="jump()"> 
                                    <a href="#"><img src="./img/index/入驻歌手4.jpg" alt=""></a>
                                    <div>
                                        <h5>麦田老狼</h5>
                                        <p>歌手、音乐人，代表作《睡在我上铺的兄弟》</p>
                                    </div>
                                </li>
                                <li onclick="jump()">
                                    <a href="#"><img src="./img/index/入驻歌手5.jpg" alt=""></a>
                                    <div>
                                        <h5>陈楚生</h5>
                                        <p>创作歌手</p>
                                    </div>
                                </li>
                            </ul>
                            <div></div>
                        </div>
                        <!-- 点击入驻歌手跳转到歌手的主页 事件 -->
                        <script>
                            function jump(){
                                window.location.href="singer.html"
                            }
                        </script>
                        <div class="dj">
                            <h3>热门主播</h3>
                            <ul>
                                <li>
                                    <a href="#"><img src="./img/index/热门主播1.jpg" alt=""></a>
                                    <div>
                                        <h4>陈立</h4>
                                        <p>心理学家、美食家陈立教授</p>
                                    </div>
                                </li>
                                <li>
                                    <a href="#"><img src="./img/index/热门主播2.jpg" alt=""></a>
                                    <div>
                                        <h4>刘维</h4>
                                        <p>歌手、播客节目《维维IE到来》</p>
                                    </div>
                                </li>
                                <li>
                                    <a href="#"><img src="./img/index/热门主播3.jpg" alt=""></a>
                                    <div>
                                        <h4>墨菲定律</h4>
                                        <p>男女双人全创作独立乐团</p>
                                    </div>
                                </li>
                                <li>
                                    <a href="#"><img src="./img/index/热门主播4.jpg" alt=""></a>
                                    <div>
                                        <h4>碎嘴许美达</h4>
                                        <p>脱口秀网络红人</p>
                                    </div>
                                </li>
                                <li>
                                    <a href="#"><img src="./img/index/热门主播5.jpg" alt=""></a>
                                    <div>
                                        <h4>银临</h4>
                                        <p>一个热门主播</p>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部导航栏 -->
        <div class="footer-nav">
            <div class="center">
                <div class="footer">
                    <!-- 底部左边 -->
                    <div>
                        <!-- 底部左边第一行 -->
                        <p>
                            <a href="">服务条款</a>
                            <span>|</span>
                            <a href="">隐私政策</a>
                            <span>|</span>
                            <a href="">儿童隐私政策</a>
                            <span>|</span>
                            <a href="">版权投诉</a>
                            <span>|</span>
                            <a href="">投资者关系</a>
                            <span>|</span>
                            <a href="">广告合作</a>
                            <span>|</span>

                        </p>
                        <!-- 底部左边第二行 -->
                        <p>
                            <span>网易科技有限公司</span>
                            <span>运营：浙网文[2021] 1186-054号</span>
                        </p>
                        <!-- 底部左边第三行 -->
                        <p>
                            <span>粤B2-20090191-18</span>
                            <span>工业和信息化部管理系统网站</span>
                            <span>浙公网安备 54821498号</span>
                        </p>
                    </div>
                    <!-- 底部右边 -->
                    <ul>
                        <li><img src="./img/index/footer1.png" alt=""> </li>
                        <li><img src="./img/index/footer2.png" alt=""> </li>
                        <li><img src="./img/index/footer3.png" alt=""> </li>
                        <li><img src="./img/index/footer4.png" alt=""> </li>
                        <li><img src="./img/index/footer5.png" alt=""> </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>

</html>